<template>
  <div class="app-container">

    <el-form ref="form" :inline="true" :model="queryParams" class="demo-form-inline">

      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择">
          <el-option label="未认证" value="no_auth" />
          <el-option label="已认证" value="authed" />
          <el-option label="认证中" value="authing" />
          <el-option label="认证失败" value="auth_failed" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="认证状态" align="center" prop="title">
        <template slot-scope="scope">
          {{ getText(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="认证图片" align="center" prop="content">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.images[0]"
            :preview-src-list="scope.row.images" />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" />

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 'authing'" type="text" @click="handleDel(scope.row)">审核</el-button>
          <p v-else>{{ getText(scope.row.status) }}</p>

        </template>
      </el-table-column></el-table>
    <div class="pagination">
      <el-pagination :current-page.sync="queryParams.pageNum" :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="fetchData" @current-change="fetchData" />
    </div>
    <el-dialog title="审核" :visible.sync="dialogVisible" width="500px">
      <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item>
          <el-select v-model="form.status" placeholder="请选择">
            <el-option label="认证成功" value="authed" />
            <el-option label="认证失败" value="auth_failed" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">审核</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { receiptAuth, approve } from '@/api/table'

export default {
  components: {

  },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogVisible: false,
      total: 0,
      form: {
        status: '',
        id: ''
      },
      queryParams: {
        'pageNum': 1,
        'pageSize': 10,
        status: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      receiptAuth(this.queryParams).then(response => {
        response.data.records.map(item => {
          item.images = JSON.parse(item.files)
        })
        this.list = response.data.records
        this.listLoading = false
        this.total = response.data.total
      })
    },
    getText(str) {
      switch (str) {
        case ' no_auth':
          return '未认证'
        case 'authed':
          return '已认证'
        case 'authing':
          return '认证中'
        case 'auth_failed':
          return '认证失败'
        default:
          return '未认证'
      }
    },
    onSubmit() {
      this.queryParams.pageNum = 1
      this.fetchData()
    },
    reset() {
      this.$refs.form.resetFields()

      this.fetchData()
    },
    send(e) {
      this.$refs.add.show(e)
    },
    handleDel(e) {
      this.dialogVisible = true
      this.form.id = e.id
    },
    submitForm() {
      approve(this.form).then(response => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.fetchData()
      })
    }

  }
}
</script>
